<template>
    <div class="content">
        <router-link to="/app/commentManager"><el-button  icon="information">待审核列表</el-button></router-link>
        <router-link to="/app/passComment"><el-button  icon="circle-check">已通过审核列表</el-button></router-link>
        <router-link to="/app/unpassComment"><el-button  icon="circle-close">未通过审核列表</el-button></router-link>
        <div class="allComment">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="auditId"
                    label="审核ID"
                    width="130px">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="130px">
            </el-table-column>
            <el-table-column
                    prop="bookName"
                    label="评论的小说"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="comment"
                    label="评论"
                    width="300px"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="commentTime"
                    label="评论时间"
                    width="150px">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
                <template scope="scope">
                    <el-button @click="allow(scope.row)" type="text" size="small">通过</el-button>
                    <el-button @click="unpass(scope.row)" type="text" size="small">不通过</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <div>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="13"
                    layout="prev, pager, next"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {Message} from 'element-ui';
    export default{
        data:function () {
            return {
                tableData: [],
                count:''
            }
        },
        methods:{
            //当前页发生改变时触发的事件
            handleCurrentChange(val) {
                this.$http.get(`http://localhost/api/getComment/${val}`).then(function (result) {
                    if(`${val}` ==1){
                        this.tableData = result.body.slice(0,13);
                    }
                    else{
                        this.tableData = result.body;
                    }
//                    this.tableData = result.body;
                })
            },
            //获取所有的评论信息
            getComment:function () {
                this.$http.get('http://localhost/api/getComment/1').then(function (result) {
                    this.tableData = result.body.slice(0,13);
                    this.count = result.body.length;
                });
            },
            //通过审核后，给服务器发送信息，将该评论添加到评论表中
            allow:function (row) {
                var _this = this;
                this.$http.post('http://localhost/api/sendToComment',{auditId:row.auditId},{emulateJSON:true}).then(function (result) {
                    Message({
                        type:'success',
                        message:result.body.message
                    });
                    _this.getComment();

                })
            },
            //不通过审核，给服务器发送信息，将该评论添加到位通过审核评论表
            unpass:function (row) {
                var _this = this;
                this.$http.post('http://localhost/api/sendToUnpassComment',{auditId:row.auditId},{emulateJSON:true}).then(function (result) {
                    _this.getComment();
                })
            }
        },
        created:function () {
            this.getComment();
        }
    }
</script>
<style scoped>
    .content{
        padding:20px 40px 0 20px;
    }
    .allComment{
        height: 660px;
        margin-bottom: 10px;;
    }
</style>